<template>
  <div>
    <Header></Header>
    <!-- <van-tabbar v-model="active" route>
      <van-tabbar-item to="/index" replace>
        <span>主页</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active : icon.inactive" />
      </van-tabbar-item>
      <van-tabbar-item to="/message" replace>
        <span>消息</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon2.active : icon2.inactive" />
      </van-tabbar-item>
      <van-tabbar-item to="/address" replace>
        <span>通讯</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon3.active: icon3.inactive" />
      </van-tabbar-item>
      <van-tabbar-item to="/me" replace>
        <span>我</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon4.active: icon4.inactive" />
      </van-tabbar-item>
    </van-tabbar> -->
    <div class="Two_box">
      <div class="bank">
        <div class="bank_words">登录时间</div>
        <div class="newdata">{{ newTime | datatime }}</div>
      </div>
      <div class="bank" @click="updata">
        <div class="bank_words">关于安全渝中</div>
        <img class="right" src="../assets/images/appa_r.png" alt />
      </div>
      <div class="bank" @click="Complaint">
        <div class="bank_words">投诉建议</div>
        <img class="right" src="../assets/images/appa_r.png" alt />
      </div>
      <div class="bank" @click="ScanCode">
        <div class="bank_words">扫一扫</div>
        <img class="right" src="../assets/images/appa_r.png" alt />
      </div>
      <div class="banks" @click="dropout">
        <div class="bank_words">退出登录</div>
        <img class="right" src="../assets/images/appa_r.png" alt />
      </div>
    </div>
    <transition>
      <div class="content_box" v-if="flag" @click="disappear">
        <div class="content_box_sons">
          <div class="content_box_son_user" @click="exitlogin">
            <div>
              <img class="username" src="../assets/images/app_human.png" alt />
            </div>
            <div class="out">退出登录</div>
          </div>
          <div class="content_box_son_getout" @click="offprogram">
            <div>
              <img class="getout" src="../assets/images/app_getout.png" alt />
            </div>
            <div class="out">关闭程序</div>
          </div>
        </div>
      </div>
    </transition>
     <Tabbar></Tabbar>
  </div>
</template>
<script>
import Header from "../components/header";
import Tabbar from "../components/tabbar";
import { Dialog } from "vant";
export default {
  data() {
    return {
      flag: false,
      show: false,
      showTwo: false, //第二次确认
      showThree: false,
      error: false,
      newTime: null,
      switch1: true,
      active: 0,
      icon: {
        active: require("../assets/images/tabbar_home_active.png"),
        inactive: require("../assets/images/tabbar_home.png"),
      },
      icon2: {
        active: require("../assets/images/tabbar_msg_active.png"),
        inactive: require("../assets/images/tabbar_msg.png"),
      },
      icon3: {
        active: require("../assets/images/call_active.png"),
        inactive: require("../assets/images/call.png"),
      },
      icon4: {
        active: require("../assets/images/tabbar_user_active.png"),
        inactive: require("../assets/images/tabbar_user.png"),
      },
    };
  },
  components: {
    Header,
    Tabbar,
  },
  created() {
    this.newTime = localStorage.getItem("newTime");
    console.log(this.newTime);
    var project = JSON.stringify(localStorage.getItem("project"));
    var who = localStorage.getItem("role");
    console.log(who);
    if (who == "user") {
      this.switch1 = false;
    } else {
      this.switch1 = true;
    }
  },
  methods: {
    sfz() {
      this.$router.push("/card");
    },
    updata() {
      this.$router.push("/updata");
    },
    dropout() {
      this.flag = true;
    },
    manage1() {
      this.$router.push("/manage11");
    },
    manage2() {
      this.$router.push("/chooseproj");
      // this.$router.push("/begin")
    },
    disappear() {
      this.flag = false;
    },
    Complaint(){
      this.$router.push("/complain");
    },
    exitlogin() {
      //退出登录弹框
      Dialog.confirm({
        title: "提示",
        message: "确定要退出吗？",
      })
        .then(() => {
          localStorage.clear();
          sessionStorage.clear();
          this.$router.replace({
            path: '/'
          });
          // on confirm
        })
        .catch(() => {
          // on cancecl
        });
    },
    offprogram() {
      if (window.plus) {
        plus.runtime.quit();
      }
    },
    ScanCode() {
      //跳转扫一扫界面
      this.$router.push("/scan");
    },
  },
  //  beforeCreate () {
  //      document.querySelector('body').setAttribute('style', 'background:#E5E5E5')
  // },
  // beforeDestroy () {
  //     document.querySelector('body').setAttribute('style', '')
  // },
};
</script>
<style scoped>
.right_sure {
  /* width: 1.6667rem;;
    height: 1.6667rem;; */
  width: 1.9733rem;
  height: 1.9733rem;
  text-align: center;
  margin: auto;
  margin-top: 0.2667rem;
}

.succes {
  text-align: center;
  font-size: 0.4267rem;
  color: black;
  /* font-weight: bold; */
  margin-top: 0.1333rem;
}

.city_msg {
  font-size: 0.4267rem;
  color: black;
  text-align: center;
  margin-bottom: 0.6667rem;
  margin-top: 0.5333rem;
}

.big_box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.lease_num {
  margin-left: 0.5333rem;
  margin-top: 0.1333rem;
}

.address {
  margin-left: 1.4667rem;
  margin-top: 0.1333rem;
  margin-top: 0.1333rem;
}

.user {
  margin-left: 0.9333rem;
  margin-top: 0.1333rem;
}

.lease_card {
  margin-left: 0.9333rem;
  margin-top: 0.1333rem;
}

.bank_words {
  margin-left: 0.4rem;
}

.clear {
  width: 100%;
  height: 1.3888888888888888rem;
  background: #fff;
  padding-top: 0.32037037037037035rem;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.clear_Caching {
  font-size: 0.42592592592592593rem;
  color: #393939;
  margin-bottom: 0.09259259259259259rem;
  margin-left: 0.4rem;
}

.Caching_photo {
  color: #999;
  font-size: 0.3148148148148148rem;
  height: 0.3888888888888889rem;
  line-height: 0.3888888888888889rem;
  margin-left: 0.4rem;
}

.Caching {
  margin-right: 0.4rem;
  font-size: 0.42592592592592593rem;
  color: #393939;
}

.bank {
  height: 1rem;
  background: #fff;
  font-size: 0.42592592592592593rem;
  color: #393939;
  padding-top: 0.32037037037037035rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  /* margin-left: 0.4rem */
}

.bank:last-child {
  border: none;
}

.right {
  width: 0.6667rem;
  height: 0.6667rem;
  margin-right: 0.2667rem;
}

.content_box {
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 90;
}

.content_box_sons {
  width: 100%;
  height: 3.185185185185185rem;
  position: absolute;
  bottom: 0;
  background: #fff;
  z-index: 100;
}

.username {
  width: 0.48148148148148145rem;
  height: 0.48148148148148145rem;
}

.getout {
  width: 0.48148148148148145rem;
  height: 0.48148148148148145rem;
}

.content_box_son_user {
  display: flex;
  margin-left: 0.8rem;
  margin-top: 0.8rem;
  align-items: center;
}

.out {
  font-size: 0.42592592592592593rem;
  color: #7b8084;
  margin-left: 0.5333rem;
}

.content_box_son_getout {
  display: flex;
  margin-top: 0.8rem;
  margin-left: 0.8rem;
  align-content: center;
}

.v-enter,
.v-leave-to {
  opacity: 0;
}

.v-enter-active,
.v-leave-active {
  transition: all 0.4s ease;
}

.Two_box {
  background: #ffffff;
}

.banks {
  height: 1rem;
  background: #fff;
  font-size: 0.42592592592592593rem;
  color: #393939;
  padding-top: 0.32037037037037035rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  /* margin-left: 0.4rem; */
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 90%;
  background-color: #fff;
  border-radius: 0.1333rem;
}

.wrapperTwo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.blockTwo {
  width: 90%;
  background-color: #fff;
  border-radius: 0.1333rem;
}

.blockerr {
  width: 90%;
  background-color: #fff;
  border-radius: 0.1333rem;
}

.top_msg {
  display: flex;
  justify-content: space-between;
  margin-top: 0.2667rem;
}

.err_img {
  width: 0.3467rem;
  height: 0.3467rem;
  margin-right: 0.2667rem;
}

.message {
  display: block;
  font-size: 0.4267rem;
  margin-left: 0.2667rem;
  color: black;
}

.line {
  width: 100%;
  height: 0.0267rem;
  background: #ddd;
  margin-top: 0.2667rem;
}

.lessee {
  font-size: 0.4rem;
  margin-top: 0.1333rem;
  margin-left: 0.2667rem;
}

.card {
  width: 94%;
  height: 1.2rem;
  border: 1px solid #ddd;
  margin-left: 0.2667rem;
  padding-left: 0.0267rem;
  margin-top: 0.2667rem;
  font-size: 0.4rem;
}

.sure {
  width: 50%;
  height: 1.3333rem;
  background: #4367fd;
  text-align: center;
  line-height: 1.3333rem;
  color: #ffffff;
  border-radius: 0.6667rem;
  margin: auto;
  margin-top: 0.5333rem;
  margin-bottom: 0.6667rem;
}

.lease {
  /* font-size:0.48rem; */
  font-size: 0.4267rem;
}

.newdata {
  margin-right: 0.5067rem;
}
.van-tabbar {
  padding: 0.4rem 0;
}
.van-tabbar--fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #ffffff;
}
.van-tabbar--fixed {
  border-top: 1px solid #cccccc;
  /* border: none; */
  padding-top: 0.8rem;
}
.van-tabbar-item {
  font-size: 0.44rem;
  line-height: 0.6rem;
}
.van-tabbar-item__icon img {
  display: block;
  height: 0.5333rem;
}
[class*="van-hairline"]::after {
  border: none;
}
</style>
